import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {useParams, useSearchParams} from "@@/exports";
import {Button, Card, Descriptions, Divider, Form, Input, message} from "antd";
import {getGetApiInfoId, postInvokeInterfaceId} from "@/services/api_info/jiekoumokuai";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */



const Index: React.FC = () => {
  const [invokeRes,setInvokeRes] = useState<any>(null)
  const [loading,setLoading] = useState(false)
  const [info,setInfo] = useState<any>(null)
  const params = useParams();
  const id = params.id ?? ""
  const onFinish = async() =>{
    setLoading(true)
    try {
      const res = await postInvokeInterfaceId({id:id},{})
      if (res?.code === 200){
        setInvokeRes(res?.data)
        message.success("调用成功")
      }
    }catch (error:any){
      message.error('请求失败，' + error.message);
    }
    setLoading(false)
  }
  const loadInfo = async() => {
    try {
      const res = await getGetApiInfoId({id:id})
      setInfo(res?.data)
      console.log(info)
    } catch (error:any){
      message.error("获取信息失败:" + error.message)
    }
  }
  useEffect(() => {
    loadInfo()
  },[])
  return (
    <PageContainer
    title="查看接口文档"
    >
      <Card>
        {info ? (
          <Descriptions title={info.name} column={1}>
            <Descriptions.Item label="接口路径">{info.path}</Descriptions.Item>
            <Descriptions.Item label="请求方式">{info.method}</Descriptions.Item>
            <Descriptions.Item label="接口描述">{info.description}</Descriptions.Item>
            <Descriptions.Item label="接口状态">{info.status === 1 ? '开启': '关闭'}</Descriptions.Item>
            <Descriptions.Item label="请求头">{info.requestHeader}</Descriptions.Item>
            <Descriptions.Item label="响应头">{info.responseHeader}</Descriptions.Item>
          </Descriptions>
        ) : (
          <>接口不存在</>
        )}

      </Card>
      <Card>
        <Form
          name="basic"
          layout="vertical"
          onFinish={onFinish}
        >

          <Form.Item
            label="请求参数"

            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider/>
      <Card title="返回结果">
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;
